<template>
  <div class="common-block">
    <div class="header">
      <div class="name">
        <slot name="title" class="title"></slot>
        <div class="btns">
          <el-button v-if="activeNum > 0" @click="upStep">上一步</el-button>
          <el-button v-if="activeNum < steps.length - 1" @click="downStep"
            >下一步</el-button
          >
          <el-button v-if="activeNum === steps.length - 1 && saveFlag" @click="save"
            >保存</el-button
          >
          <el-button @click="backup">返回</el-button>
        </div>
      </div>
      <el-steps :active="activeNum" finish-status="success" simple>
        <el-step
          v-for="(item, index) in steps"
          :key="index + 'step'"
          :title="item"
        ></el-step>
      </el-steps>
    </div>
    <div class="content"></div>
  </div>
</template>
<script>
export default {
  props: ["activeNum", "steps", 'saveFlag'],
  methods: {
    upStep() {
      this.$parent.upStep();
    },
    downStep() {
      this.$parent.downStep();
    },
    save() {
      this.$parent.save();
    },
    backup() {
      this.$parent.backup();
    },
  },
};
</script>
<style lang="scss">
.common-block {
  .name {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
  }
  .el-step {
    .el-step__head {
      &.is-process {
        color: #67c23a !important;
        border-color: #67c23a !important;
      }
    }
    .el-step__title.is-process {
      color: #67c23a !important;
    }
  }
}
</style>